<template>
  <div id="hello">
    <div class="main">
      <div class="text">
        <img
          class="text text1 slide1"
          src="../assets/images/text1.png"
          alt=""
        />
        <img
          class="text text2 slide2"
          src="../assets/images/text2.png"
          alt=""
        />
        <img
          class="text text3 slide3"
          src="../assets/images/text3.png"
          alt=""
        />
      </div>
      <div class="ct">
        <div class="item" v-for="(item, index) in imagedata1" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="pic-wrapper">
        <div class="close"></div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in imagedata1"
              :key="index"
            >
              <img :src="item" alt="" />
            </div>
          </div>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "./js/jquery.min";
import Swiper from "./js/swiper-bundle.min";
var imagedata1 = [];
for (let i = 1; i <= 30; i++) {
  let imagedata = require("../assets/images/" + i + ".jpg");
  imagedata1.push(imagedata);
}
export default {
  data() {
    return {
      data1: "",
      imagedata1: imagedata1,
    };
  },

  methods: {},
  mounted() {
    // let swiperNode = "";
    // for (let i = 1, len = 30; i < len; i++) {
    //   swiperNode +=
    //     '<div class="swiper-slide"><img src="../assets/images/' +
    //     i +
    //     '.jpg" alt=""></div>';
    // }
    // $(".swiper-wrapper").html(swiperNode);
    let swiper = new Swiper(".swiper-container", {
      direction: "horizontal", // 垂直切换选项
      loop: true, // 循环模式选项
      speed: 1,
    });

    setTimeout(function () {
      $(".text").animate({
        opacity: 0,
      });
      $(".ct").show();
      move();
    }, 5000);
    // let htm = "";
    let timer;
    console.log(timer);
    // for (let i = 1, len = 30; i < len; i++) {
    //   htm +=
    //     '<div class="item" data-i="' +
    //     i +
    //     '"><img src="../assets/images/' +
    //     i +
    //     '.jpg" alt=""></div>';
    // }
    // $(".ct").html(htm);
    let list = $(".item");
    $(".ct").on("click", ".item", function () {
      console.log(Number($(this).index()) + 1);
      swiper.slideTo(Number($(this).index()) + 1);
      // $('.pic-wrapper').show()
      $(".pic-wrapper").css({
        opacity: 1,
        "z-index": 99,
      });
      $(".ct").hide();
    });

    $(".swiper-button-prev").on("click", function () {
      console.log("prev");
      swiper.slidePrev();
    });

    $(".swiper-button-next").on("click", function () {
      console.log("next");
      swiper.slideNext();
    });

    $(".close").on("click", function () {
      $(".ct").show();
      // $('.pic-wrapper').hide()
      $(".pic-wrapper").css({
        opacity: 0,
        "z-index": -1,
      });
    });

    function move() {
      for (let i = 0, len = list.length; i < len; i++) {
        if (i % 4 == 0) {
          $(".item")
            .eq(i)
            .css("top", -Number(Math.floor(Math.random() * 1000) + 200) + "px");
          $(".item")
            .eq(i)
            .css(
              "left",
              -Number(Math.floor(Math.random() * 2000) - 100) + "px"
            );
        } else if (i % 4 == 1) {
          $(".item")
            .eq(i)
            .css("top", -Number(Math.floor(Math.random() * 1000) + 200) + "px");
          $(".item")
            .eq(i)
            .css("left", Number(Math.floor(Math.random() * 2000) - 100) + "px");
        } else if (i % 4 == 2) {
          $(".item")
            .eq(i)
            .css("top", Number(Math.floor(Math.random() * 1000) + 200) + "px");
          $(".item")
            .eq(i)
            .css(
              "left",
              -Number(Math.floor(Math.random() * 2000) - 100) + "px"
            );
        } else {
          $(".item")
            .eq(i)
            .css("top", Number(Math.floor(Math.random() * 1000) + 200) + "px");
          $(".item")
            .eq(i)
            .css("left", Number(Math.floor(Math.random() * 2000) - 100) + "px");
        }
        $(".item").eq(i).attr("data-z", -10000);
        let delay = Math.floor(Math.random() * 10000);
        setTimeout(function () {
          let Z = ~~$(".item").eq(i).attr("data-z");
          timer = setInterval(function () {
            if (Z >= -9909) {
              $(".item").eq(i).css("opacity", 1);
            }
            if (Z >= -100) {
              $(".item").eq(i).css("opacity", 0);
            }
            if (Z >= 1000) {
              Z = -10000;
            }
            $(".item")
              .eq(i)
              .css("transform", "translateZ(" + Z + "px)");
            Z += 10;
          }, 5);
        }, delay);
      }
    }
    // })()
  },
};
</script> 
<style>
@import url(./css/swiper-bundle.min.css);

.main {
  overflow: hidden;
  background: url(../assets/images/bg.jpg);
  background-size: cover;
  position: absolute;
  width: 100vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ct {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 800px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective-origin: center 30vh;
  perspective: 1000px;
}
.ct .item {
  font-size: 0;
  position: absolute;
  transform-origin: center;
  width: 400px;
  transform: translateZ(-10000px);
  background-color: rgba(176, 44, 47, 0.2);
  border: 8px solid #fff;
  opacity: 0;
  /* opacity: 1; */
  transition: opacity 0.5s linear;
  cursor: pointer;
}
.ct .item img {
  font-size: 0;
  width: 100%;
  height: 100%;
}
.text1 {
  position: absolute;
  z-index: 99;
  top: 240px;
  left: -1920px;
}
.text2 {
  position: absolute;
  z-index: 99;
  top: 450px;
  left: -1920px;
}
.text3 {
  position: absolute;
  z-index: 99;
  top: 660px;
  left: -1920px;
}

.slide1 {
  animation: 0.8s slide forwards;
}

.slide2 {
  animation: 1s slide 1.2s forwards;
}

.slide3 {
  animation: 1.2s slide 2.4s forwards;
}

.slide11 {
  animation: 0.8s slide2 forwards;
}

.slide12 {
  animation: 1s slide2 1.2s forwards;
}

.slide13 {
  animation: 1.2s slide2 2.4s forwards;
}

@keyframes slide {
  from {
    left: -1920px;
  }

  to {
    left: 86.5px;
  }
}
@keyframes slide2 {
  from {
    right: -1920px;
  }

  to {
    right: 86.5px;
  }
}

.pic-wrapper {
  /* display: none; */
  opacity: 0;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1650px;
  height: 928px;
  background-color: #fff;
  border: 8px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.5);
  transition: opacity 0.1s linear;
}

.pic-wrapper .close {
  position: absolute;
  width: 45px;
  height: 45px;
  background: #fff url(../assets/images/close-ico.png) no-repeat center;
  right: -25px;
  top: -25px;
  z-index: 10;
  border-radius: 20px;
  box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-button-prev {
  left: -100px;
}

.swiper-button-next {
  right: -100px;
}

.swiper-slide,
.swiper-slide img {
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}
</style>